<!--
模拟问题页，有修改问题和删除问题的功能键
author：郦洋

问题页中加入点赞、举报、评论的功能键和评论的显示区
author: 徐哲

重写问题详情界面
author： 汤峻侬
-->
{% extends 'base.html' %}
{% load static %}
{% block title %}问题详情页{% endblock %}
{% block link_before %}

    <!--点赞按钮所需css-->
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
{% endblock %}
    <!--内含多种功能的css-->
{% block link_after %}
    <link rel="stylesheet" href="{% static 'mycss/style.css' %}">

{% endblock %}

{% block content %}
<div id="colorlib-container">
			<div class="container">
				<div class="row">
					<div class="col-md-9 content">
                         <!--问题部分-->
						<div class="row row-pb-lg">
							<div class="col-md-12">
								<div class="blog">

									<div class="desc">
                                        <!-- 提问的简要信息，包括科目、发布日期和提问者 -->
										<p class="meta">
											<span class="sub"><a href="#">{{ question.question_subject }}</a></span>
											<span class="date">{{ question.pub_date }}</span>
											<span class="questioner">By <a href="#">{{ question.questioner }}</a></span>
                                            <span class="questioner"><a href="#">浏览量：{{ question.page_views }}</a></span>
										</p>
                                        <!-- 问题的标题和内容 -->
										<h2><a href="#">{{ question.question_title }}</a></h2>
                                        <p>{{ question.question_text | safe }}</p>
                                        <div class="row justify-content-end ">
                                            <div class="col-4"></div>
                                            {% if user == question.questioner %}
                                                <div class="col-2" onclick="confirm_update()"><button type="button" class="btn btn-outline-secondary">更新问题</button></div>
                                                <div class="col-2"><button type="button" onclick="confirm_delete()" class="btn btn-outline-secondary">删除问题</button></div>
                                            {% endif %}
                                        </div>
                                    </div>

								</div>
							</div>
						</div>
                        <!--评论部分-->
                        <div class="row row-pb-lg">
							<div class="col-md-12">
								<h2 class="comment-heading">Comments</h2>

                                {% for commenti in comments %}
                                    <div class="review">
                                    {% if commenti.comment_person.avatar %}
                                        <div class="user-img" style="background-image: url('{{commenti.comment_person.avatar.url}}'); background-size: contain " > </div>
                                    {% else %}
                                        <img width="80" height="80" src="/media/avatar/default0.jpg" class="img-circle"/>
                                    {% endif %}
                                    <div class="desc py-3">
                                        <h4>
                                            <span class="text-left"><strong>{{commenti.comment_person}}</strong></span>
                                            <span class="text-right">{{ commenti.pub_date }}</span>
                                        </h4>
                                        <p>{{ commenti.comment_text | safe}}</p>

                                        <div class="row justify-content-between">
                                            <div class="col-4 ">点赞数：{{ commenti.good_num }}</div>

                                                <div class="col-1 icon-wrapper ">
                                                    <span class="icon"><i class="fa fa-thumbs-up"></i></span>
                                                    <div class="border"><span></span></div>
                                                    <div class="satellite">
                                                      <span></span>
                                                      <span></span>
                                                      <span></span>
                                                      <span></span>
                                                      <span></span>
                                                      <span></span>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                    </div>

                                {% endfor %}
                            </div>


							</div>

                        <!--回复问题贴-->
                        <div class="row">
							<div class="col-md-12">
                                <h2 class="comment-heading"><strong>我也要说</strong></h2>
								<form action="{% url 'qas_system:question_comment' question.id %}" method="post">
                                    {% csrf_token %}
									<div class="row form-group">
										<div class="col-md-12">
											<!-- <label for="message">Message</label> -->
											<textarea id="comment_text" name="comment_text" cols="30" rows="10" class="form-control" placeholder="请在此处写下你的想法"></textarea>
										</div>
									</div>
									<div class="form-group">
										<div class="btn-contain">
                                            <button type="submit" class="submit_btn">提交</button>
                                            <span class="btn-particles"></span>
                                        </div>

									</div>
								</form>
							</div>
						</div>
                        <!--举报-->
                        <div class="row">
							<div class="col-md-12">
                                <h2 class="comment-heading"><strong>举报此贴</strong></h2>
								<form action="{% url 'qas_system:question_tipoff' question.id %}" method="post">
                                    {% csrf_token %}
									<div class="row form-group">
										<div class="col-md-12">
											<!-- <label for="message">想举报？请说明理由</label> -->
											<textarea id="reason" name="comment_text" cols="30" rows="10" class="form-control" placeholder="请在此处写下你的理由"></textarea>
										</div>
									</div>
									<div class="form-group">
										<div class="btn-contain">
                                            <button type="submit" class="submit_btn">确认举报</button>
                                            <span class="btn-particles"></span>
                                        </div>

									</div>
								</form>
							</div>
						</div>
                    </div>
                </div>
			</div>
</div>
{% endblock %}

{% block script %}
    <script>
    // 删除文章的函数
    function confirm_delete() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认删除",
            // 正文
            content: "确认删除这个问题吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href="/qas_system/question-delete/{{ question.id }}"
            },
        })
    }
    </script>

    <script>
    // 删除文章的函数
    function confirm_update() {
        // 调用layer弹窗组件
        layer.open({
            // 弹窗标题
            title: "确认修改",
            // 正文
            content: "确认要对该问题进行修改吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                // 指定应当前往的 url
                location.href="/qas_system/updateq/{{ question.id }}"
            },
        })
    }
    </script>
    <!--点赞按钮所需 js文件-->
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
    <script src="{% static 'myjs/button.js' %}"></script>
{% endblock %}
